<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
	request.setCharacterEncoding("utf-8");
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>开森商城网-开森不只是一种心情</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="./css/user_index.css">
	<script src="./js/user_index.js"></script>

  </head>
  
  <body>
 	<div id="ad">
        <img id="adcon" src="./images/userindex/webad1.jpg" width="1200px" height="360px"/>
        <img id="adcur" src="./images/userindex/webad2.jpg" width="1200px" height="80px"/>
        <span id="close">×</span>
    </div>
    <div class="bigtop" id="bigtop"></div>
   	<div class="header_hidden" id="header">
   		<div style="width:1200px; margin:auto;">
	   		<div style="width:320px; padding-top:8px; color:#C30; font-weight:bold; float:left;">
				<div style="font-size:20px;">开森商城网</div>
				<div style="font-size:18px;">Kaisen.com</div>
			</div>
			<div style="float:left; padding-top:8px; width:560px;">
				<form method="get" action="#">
					<input type="text" placeholder="该功能不存在请勿点击搜索" class="search_text"/><input type="button" class="search_button" value="搜索"/>
				</form>
			</div>
			<div style="float:left; padding-top:8px;">
				<div class="goodcar" style="margin-top:0px;">
					<div class="goodcar_1">
						<a href="ShoppingcarServlet.do?op=findAll&username=${sessionScope.user.username }" target="_blank">我的购物车&nbsp;&nbsp;></a>
						<span id="goodcar_span"></span>
						<div class="goodcar_2" id="goodcar"><br /><br /><br />购物车都饿扁了，快点东西吧~</div>
					</div>
				</div>	
			</div>
   		</div>
	</div>
	<div style="width:1200px; margin:auto;">
		<% if(session.getAttribute("user") == null){%>
			<jsp:include page="user/top.jsp"></jsp:include>
		<%}else{ %>
			<jsp:include page="user/top2.jsp"></jsp:include>
		<%} %>
		<div style="height:38px;"></div>
		<jsp:include page="user/header.jsp"></jsp:include>
		<!--返回顶部 -->
		<a href="javascript:scrollTo(0,0)"><div class="back_top">∧</div></a>
		<!--主导航-->
		<div class="main">
			<div class="nav">
				<ul>
					<li style="width:255px; color:#FFF; background:#C00; text-align:left;">&nbsp;&nbsp;&nbsp;全部商品分类</li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
					<li><a href="#" target="_blank"><del>导航</del></a></li>
				</ul>
			</div>
			<!--分类导航-->
			<div class="nav_left">
				<ul class="topmenu">
					<li onMouseMove="showmenu(1)"><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu1">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">
								<dl>
									<dd>图片一</dd>
									<dd>图片二</dd>
								</dl>
								<dl>
									<dt>推荐品牌</dt>
									<dd><a href="javascript:void(0)"><del>某个商品名称1</del></a></dd>
									<dd><a href="javascript:void(0)"><del>某个商品名称2</del></a></dd>
									<dd><a href="javascript:void(0)"><del>某个商品名称3</del></a></dd>
									<dd><a href="javascript:void(0)"><del>某个商品名称4</del></a></dd>
									<dd><a href="javascript:void(0)"><del>某个商品名称5</del></a></dd>
								</dl>
							</div>
						</div>
					</li>
					<li onMouseMove="showmenu(2)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu2">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>
					</li>
					<li onMouseMove="showmenu(3)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu3">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>
					</li>
					<li onMouseMove="showmenu(4)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu4">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>
					</li>
					<li onMouseMove="showmenu(5)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu5">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>
					</li>
					<li onMouseMove="showmenu(6)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu6">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>                
					</li>
					<li onMouseMove="showmenu(7)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu7">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>                
					</li>
					<li onMouseMove="showmenu(8)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu8">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>                
					</li>
					<li onMouseMove="showmenu(9)"><a href="#" target="_blank"><del>导航、</del></a><a href="#" target="_blank"><del>导航</del></a>
						<div class="submenu" id="submenu9">
							<div class="leftdiv">
								<dl>
									<dt><a href="#"><del>左侧二级导航01</del></a></dt>
									<dd>
										<a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a> <a href="#"><del>三级级导航</del></a>
									</dd>
								</dl>
							</div>
							<div class="rightdiv">品牌广告</div>
						</div>                
					</li>
				</ul>
			</div>
			<div style="background:#0C6; height:430px;" id="menu1"></div>
			<div style="background:#F00; height:430px; display:none;" id="menu2"></div>
			<div style="background:#0F0; height:430px; display:none;" id="menu3"></div>
			<div style="background:#00F; height:430px; display:none;" id="menu4"></div>
			<div style="background:#FF0; height:430px; display:none;" id="menu5"></div>
			<div style="background:#0FF; height:430px; display:none;" id="menu6"></div>
			<div style="background:#F0F; height:430px; display:none;" id="menu7"></div>
			<div style="background:#636; height:430px; display:none;" id="menu8"></div>
			<div style="background:#F60; height:430px; display:none;" id="menu9"></div>
		</div>
		<!--广告-->
		<div style="height:15px;"></div>
		<div><a href="#" target="_blank"><img src="./images/userindex/ad.png" width="100%" title="红酒"/></a></div>
		<div style="height:15px;"></div>
		<!--今日推荐-->
		<div class="recommend">
			<div style="height:200px; width:20%; float:left; background:#099;"><img src="./images/userindex/recommend.png" width="100%" height="200" title="今日推荐"/></div>
			<a href="#" target="_blank"><div style="height:200px; width:20%; float:left; background:#009;"></div></a>
			<a href="#" target="_blank"><div style="height:200px; width:20%; float:left; background:#0F9;"></div></a>
			<a href="#" target="_blank"><div style="height:200px; width:20%; float:left; background:#9C0;"></div></a>
			<a href="#" target="_blank"><div style="height:200px; width:20%; float:left; background:#939;"></div></a>
		</div>
		<!--最新商品-->
		<div style="height:25px; font-size:21px; font-weight:700;font-family:微软雅黑; margin-top:46px; margin-left:22px;">最新商品</div>
		<div class="guess_like">
		<c:forEach var="g" items="${requestScope.goodlist}">
			<a href="UserGoodServlet.do?goodId=${g.id }" target="_blank">
				<div class="like1">
					<div class="like_1"><img src="${g.picurl }" style="widht:180px; height:160px; margin-top:28px"/></div>
					<div class="like_2">${g.goodname }</div>
					<div class="like_3">￥${g.memberprice }</div>
					<div class="like_4">销量：${g.solded }</div>
				</div>
			</a>
		</c:forEach>
		</div>
		<!--承诺广告-->
		<div style="height:15px;"></div>
		<div class="foot"><img src="./images/userindex/acceptance.png" title="开森承诺" width="100%" style="cursor:pointer"/></div>
		<div style="height:15px;"></div>
		<!--版权-->
		<jsp:include page="user/bottom.jsp"></jsp:include>
	</div>
	<div style="position:absolute; width:100%; height:120px; background:#EAEAEA; z-index:-1; margin-top:-120px;"></div>
	<script type="text/javascript">
		//全局变量
		var oAd = document.getElementById('ad');
		var oAdcon = document.getElementById('adcon');
		var oAdcur = document.getElementById('adcur');
		var oClose = document.getElementById('close');
		//var submenu = document.getElementById('submenu');
		
		var maxH = oAdcon.height ;//最大高度
		var minH = oAdcur.height ;//最小高度
		var step = 5;//移动的距离
		var h = 0;	
		
		/*广告向下展开*/
		function adDown(){
			oAd.style.display = "block";
			oAd.style.height = h + "px";
			if(h<maxH){
				h += step; //向下移动
				setTimeout(adDown,1);
			}else{
				setTimeout(adUp,3000); //停留时间自己适当调整 1000 = 1秒
			}
		}
		
		/*广告向上收起*/
		function adUp(){
			oAd.style.height = h + "px";
			if(h>minH) {
				h -= step; //向上移动
				setTimeout(adUp,1);
			}else {			
				oAdcon.style.display = "none";
				oClose.style.display = "block";
			}

			for(var i=1; i<=9; i++){
				document.getElementById('submenu'+i).style.top = "343px";
			}
		}
		
		oClose.onclick = function(){
			for(var i=1; i<=9; i++){
				document.getElementById('submenu'+i).style.top = "262px";
			}
			oAd.style.display = "none";
		}
		setTimeout(adDown, 3000);
    </script>
  </body>
</html>
